<template>
	<view class="page">
		<view class="p-4">
			<view class="flex flex-center">
				<view class="text-dark-light-5 text-right" style="width:100px;">提现至：</view>
				<view class="flex-1 mx-4 py-4 px-2 bg rounded-4 pointer flex flex-center bg-white"
					hover-class="bg-hover" @tap="toogleSelectWithdrawalAccount">
					<uni-icons v-if="form.channels === 'alipay'" type="paperplane-filled" color="#1677ff" />
					<uni-icons v-else-if="form.channels === 'wxpay'" type="weixin" color="#00c250" />
					<uni-icons v-else type="info" color="#1677ff" />
					<view class="flex-1 px-4" v-if="form.channels === 'alipay'">
						<view class="font-weight-600">{{ dealer.UserFinanceAccount.alipay.name }}</view>
						<view class="h10">支付宝</view>
					</view>
					<view class="flex-1 px-4" v-else-if="form.channels === 'wxpay'">
						<view class="font-weight-600">{{ dealer.UserFinanceAccount.wxpay.name }}</view>
						<view class="h10">微信</view>
					</view>
					<view class="flex-1 px-4" v-else>
						<view class="font-weight-600">请选择到账账户</view>
					</view>
					<uni-icons type="forward" color="#666666" />
				</view>
			</view>
			<view v-show="showAccountList">
				<view class="flex mt-6 h10">
					<view class="text-dark-light-5 py-4" style="width:100px;"></view>
					<view class="flex-1 mx-4 py-4 px-2 bg rounded-4 flex flex-center bg-white" hover-class="bg-hover"
						@tap="selectWithdrawalAccount('alipay')">
						<uni-icons type="paperplane-filled" color="#1677ff" />
						<view class="flex-1 px-4">
							<view class="font-weight-600">
								{{ dealer.UserFinanceAccount.alipay ? dealer.UserFinanceAccount.alipay.name : '未设置' }}
							</view>
							<view class="h10">支付宝</view>
						</view>
						<view v-if="dealer.UserFinanceAccount.alipay" @tap.stop="showModalFor('alipay')" class="py-3">
							修改收款信息</view>
						<view v-else>完善收款信息</view>
					</view>
				</view>
				<view class="flex mt-6 h10">
					<view class="text-dark-light-5 py-4" style="width:100px;"></view>
					<view class="flex-1 mx-4 py-4 px-2 bg rounded-4 flex flex-center bg-white" hover-class="bg-hover"
						@tap="selectWithdrawalAccount('wxpay')">
						<uni-icons type="weixin" color="#00c250" />
						<view class="flex-1 px-4">
							<view class="font-weight-600">
								{{ dealer.UserFinanceAccount.wxpay ? dealer.UserFinanceAccount.wxpay.name : '未设置' }}
							</view>
							<view class="h10">微信</view>
						</view>
						<view v-if="dealer.UserFinanceAccount.wxpay" @tap.stop="showModalFor('wxpay')" class="py-3">
							修改收款信息</view>
						<view v-else>完善收款信息</view>
					</view>
				</view>
			</view>
			<view class="bg-white rounded-4 mt-6 pb-10">
				<view class="flex flex-center border-bottom py-10 mb-10 border-bottom-grey">
					<view class="h1 font-weight-600 px-10">￥</view>
					<input v-model="form.price" type="digit" class="flex-1 font-weight-600 price-input" focus
						autocomplete="off" placeholder="请输入提现金额" placeholder-class="h9 font-weight-400" />
				</view>
				<view class="font-weight-600 mb-10 h9 px-4">当前可提现余额 <text class="text-danger">{{ dealer.user.withdrawal_price
				}}</text>
					元。<text class="text-primary pointer" @tap="allWithdrawal">全部提现</text></view>
				<view class="flex-1"></view>
				<view class="flex flex-x-flex-end">
					<button class="bg-primary text-white withdrawal-btn" :disabled="form.price <= 0"
						@tap="submitWithdrawal">立即提现</button>
				</view>
			</view>
		</view>
		<x-popup v-model="showModal" top="30vh">
			<view class="h6 font-weight-600 p-4 text-center">
				{{ accountForm.channels === 'wxpay' ? '设置微信账户' : '设置支付宝账户' }}
			</view>
			<view class="flex-1 flex flex-column  overflow-auto py-10">
				<view class="px-6 mb-4">
					<view class="text-dark-light-5 mb-2 h9">真实姓名</view>
					<input v-model="accountForm.name" class="bg-grey flex-1 font-weight-600 p-4 rounded-4" />
				</view>
				<view class="px-6 mb-4">
					<view class="text-dark-light-5 mb-2 h9">手机号</view>
					<input v-model="accountForm.mobile" class="bg-grey flex-1 font-weight-600 p-4 rounded-4" />
				</view>
				<view class="px-6 mb-4 text-center flex flex-column flex-y-center">
					<view class="text-dark-light-5 mb-2 h9 text-left w-100">收款二维码</view>
					<view class="border" @tap="upload">
						<image v-if="accountForm.qrcode" :src="accountForm.qrcode" style="width: 160px;height: 200;" />
						<uni-icons type="images" v-else color="var(--xl-dark-light-5)" size="200" />
					</view>
				</view>
				<view class="flex-1" />
				<view class="flex flex-center">
					<button class="bg-primary text-white w-50" @click="handleValidateButtonClick">保存</button>
				</view>
			</view>
		</x-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app";
	import { $page, $http, $message } from '@/utils';
	const form = ref({
		channels: '',
		price: '',
	})
	type UserFinanceAccountKey='alipay'|'wxpay';
	const dealer = ref<{
		state:null|number,
		link:string,
		qrcode:string,
		user:any,
		UserFinanceAccount:{
			alipay:any,
			wxpay:any
		}
	}>({
		state: null,
		link: '',
		qrcode: '',
		user: {
			people_num: '--',
			order_num: '--',
			order_price: '--',
			dealer_price: '--',
			withdrawal_price: '--',
		},
		UserFinanceAccount: {
			alipay: null,
			wxpay: null,
		},
	})
	const showAccountList = ref(false);
	onLoad(() => {
		$page.title('提现');
		getDealer();
	})
	const toogleSelectWithdrawalAccount = () => {
		showAccountList.value = !showAccountList.value;
	}
	const getDealer = () => {
		$http.get('Dealer/dealer').then((res : any) => {
			if (res.code === $http.ResponseCode.SUCCESS) {
				dealer.value = res.data;
				if (res.data.state === 1) {
					if (res.data.UserFinanceAccount.wxpay) {
						form.value.channels = 'wxpay';
					} else if (res.data.UserFinanceAccount.alipay) {
						form.value.channels = 'alipay';
					} else {
						toogleSelectWithdrawalAccount();
					}
				}
			}
		})
	}

	const selectWithdrawalAccount = (channels:UserFinanceAccountKey) => {
		if (dealer.value.UserFinanceAccount[channels]) {
			form.value.channels = channels;
			showAccountList.value = false;
		} else {
			showModalFor(channels);
		}
	}
	const allWithdrawal = () => {
		form.value.price = dealer.value.user.withdrawal_price;
	}
	let formAjax = false;
	const submitWithdrawal = () => {
		if (formAjax) return;
		formAjax = true;
		$http.post('Dealer/withdrawal', {
			data: form.value
		}).then((res : any) => {
			if (res.code === $http.ResponseCode.SUCCESS) {
				$message.success('提现成功');
				getDealer();
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			} else {
				$message.error(res.msg);
			}
		}).finally(() => {
			formAjax = false;
		})
	}
	const accountForm = ref({
		valueAjax: false,
		channels: '',
		qrcode: '',
		name: '',
		mobile: ''
	})
	const showModal = ref(false);
	const showModalFor = (channels:UserFinanceAccountKey) => {
		accountForm.value.channels = channels;
		accountForm.value.qrcode = '';
		accountForm.value.name = '';
		accountForm.value.mobile = '';
		if (channels === 'alipay' && dealer.value.UserFinanceAccount.alipay) {
			accountForm.value.qrcode = dealer.value.UserFinanceAccount.alipay.qrcode;
			accountForm.value.name = dealer.value.UserFinanceAccount.alipay.name;
			accountForm.value.mobile = dealer.value.UserFinanceAccount.alipay.mobile;
		} else if (channels === 'wxpay' && dealer.value.UserFinanceAccount.wxpay) {
			accountForm.value.qrcode = dealer.value.UserFinanceAccount.wxpay.qrcode;
			accountForm.value.name = dealer.value.UserFinanceAccount.wxpay.name;
			accountForm.value.mobile = dealer.value.UserFinanceAccount.wxpay.mobile;
		}
		showModal.value = true;
	}
	const handleValidateButtonClick = () => {
		if (accountForm.value.valueAjax) return;
		accountForm.value.valueAjax = true;
		$http.post('Dealer/saveUserFinanceAccount', {
			data: accountForm.value
		}).then(res => {
			if (res.code === 200) {
				$message.success('保存成功');
				showModal.value = false;
				getDealer();
			} else {
				$message.error('保存失败');
			}
		}).finally(() => {
			accountForm.value.valueAjax = false;
		})
	}
	const upload = () => {
		uni.chooseImage({
			count: 1, //默认9
			success: (res : any) => {
				$http.upload('Upload/upload', {
					name: 'file',
					filePath: res.tempFilePaths[0]
				}).then((res : any) => {
					if (res.code === $http.ResponseCode.SUCCESS) {
						accountForm.value.qrcode = res.data.url;
					} else {
						$message.error(res.msg);
					}
				})
			}
		});
	}
</script>

<style lang="scss" scoped>
	.page {
		height: calc(100vh - var(--window-top));
	}

	.withdrawal-btn[disabled]:not([type]) {
		color: var(--xl-white);
		background-color: var(--xl-primary-light-2);
	}

	.price-input {
		font-size: 10vw;
		color: #d03050;
	}
</style>